<template>
	<view class="startSearch_container">
		<u-navbar title="选择地址" placeholder>
			<view class="u-nav-slot" slot="left">
				<u-icon @click="goback" name="arrow-left" size="19"></u-icon>
			</view>
		</u-navbar>
		<!-- 搜索框 -->
		<view class="searchView">
			<u-search v-model="userkeyords" @change="userInput" shape="round" clearabled></u-search>
		</view>
		<!-- 搜索结果 -->
		<view class="searchResult" @click.stop="userSelect(item)" v-for="(item,i) in tips" :key="i"
			v-if=" item && item.name">
			<view>
				{{item.name}}
			</view>
			<view class="serchdirection" v-if=" item && item.address">
				{{ item.id ? item.district : '' }}{{ item.address.length == 0 ? '' : item.address }}
			</view>
		</view>
	</view>
</template>

<script>
	import amap from "../../common/amap-wx.130.js"
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				key: '4412f1a1546136b8476c2c1011cbbad9', //高德地图的key
				tips: [], //提示列表
				location: '', // 经纬度,
				userkeyords: '', //关键词
			}
		},
		// 刚进入页面
		onLoad(option) {
			this.location = option.longitude + ',' + option.latitude
			this.tips = this.pathHistory
		},
		computed: {
			...mapState('userLocation', ['pathHistory'])
		},
		methods: {
			// 搜索框触发调用
			userInput(e) {
				let that = this
				// 关键词
				this.userkeyords = e
				if (this.userkeyords.length == 0) {
					this.tips = []
				}
				// 高德地图sdk的获取----构造出实例对象
				let myAmapFun = new amap.AMapWX({
					key: this.key
				})
				myAmapFun.getInputtips({
					keywords: this.userkeyords,
					location: this.location,
					success: (res) => {
						console.log(res, 41)
						if (res && res.tips && res.tips[0]) {
							that.tips = res.tips
						}
					}
				})
			},
			...mapMutations('userLocation', ['getEnd']),
			// 选择的结束路线
			userSelect(res) {
				let city
				if (res.location) {
					// 判断有没有市
					if (res.district.indexOf('市') != -1) {
						// 获取市的下标
						let index = res.district.indexOf('市')
						// 判断有没有第二个市
						if (res.district.indexOf('市', index + 1) == -1) {
							// 判断是否包含县
							if (!res.district.includes('县')) {
								if (res.district.split('市')[0].includes('省')) {
									// 搜索到区
									city = res.district.split('市')[0].split('省')[1] + '市'
								} else {
									city = res.district.split('市')[0] + '市'
								}

							} else {
								// 搜索县
								city = res.district.split('市')[1].split('县')[0] + '县'
							}
						} else {
							city = res.district.split('市')[1] + '市'
						}
					} else {
						// 搜索出来的没有市
						city = res.district.split('省')[1]
					}
					let address = {
						id: res.id,
						address: res.district + res.address,
						latitude: res.location.length > 0 ? res.location.split(',')[1] : '',
						longitude: res.location.length > 0 ? res.location.split(',')[0] : '',
						name: res.name,
						city: city,
						district: res.district,
						adcode: res.adcode
					}
					this.getEnd(address)
				} else {
					this.getEnd(res)
				}
				uni.navigateBack()
			},
			// 返回上一页面
			goback() {
				uni.navigateBack()
			}

		}
	}
</script>

<style lang="scss" scoped>
	.searchResult {
		border-bottom: 0.5px px solid #f0f0f0;
		padding: 10px 23px;

		.serchdirection {
			font-size: 14px;
			color: #999;
		}
	}
</style>
